import { Chart } from "@antv/g2";
import { Http } from "@b/model/base/http";
import { REANIMATIONTIME } from "@b/model/enum";
import { cloneDeep } from "lodash";

export class Box3 {
    chart?: Chart;
    timer: any;
    width: number;
    height: number
    constructor(width: string, height: string) {
        this.timer = null
        this.width = parseInt(width)
        this.height = parseInt(height)
    }
    async init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box3') as HTMLElement,
            width, height,
            theme: 'classicDark',
            // title: '双向转诊情况'
        })
        this.chart.data([])
            .coordinate({ transform: [{ type: 'transpose' }] })
        this.chart.interval().encode('x', 'name').encode('y', 1)
            .encode('size', 30).encode('color', ['#ffffff00']).tooltip(false)
        this.chart.interval()
            .axis('x', { grid: false, title: false, tick: false, labelOpacity: 1, line: true, labelFontSize: 16, labelFontWeight: 700 })
            .axis('y', { grid: false, tick: false, title: false, labelOpacity: 1, labelFontSize: 16, labelFontWeight: 700 })
            .encode('x', 'name')
            .encode('y', 'value')
            .encode('color', 'name')
            .scale('color', {
                range: ['#fbe744', '#9b0d28', '#00c4ef', '#00d248', '#004ccf'],
            })
            .style('radius', 15).style('minHeight', 10).animate('enter', { type: 'fadeIn' }).animate('update', { type: 'growInY' })
            .encode('size', 30).style('cursor', 'pointer').legend(false)
        await this.chart.render();
    }
    async changeData(search: string) {
        clearTimeout(this.timer)
        const res = await new Http().request('/v1/bigscreen/GetTransferTreatAnalyseInfo', { method: 'GET', parames: { type: search }, cache: true })
        const r = cloneDeep(res)
        this.chart?.changeData(r)
        this.timer = setTimeout(() => {
            this.changeData(search)
        }, REANIMATIONTIME);
    }
}